<ul class="u-tab menu fn-marb10 fn-border-top-radius">
    <li t="w_PTZControl" data-for="ptz_control" class="fn-border-top-radius"><!-- PTZ Control --></li>
    <li t="w_Joystick" data-for="ptz_joystick" class="fn-border-top-radius"><!-- Joystick --></li>
</ul>
<div class="u-tab-content">
    <div class="tab-panel" data-page="ptz_control">
        <div class="fn-width130 fn-height130 fn-marl10">
            <a class="ui-ptz-icon" href="javascript:;" cmd="LeftUp">
                <i class="ui-ptz-icon-leftup"></i>
            </a>
            <a class="ui-ptz-icon" href="javascript:;" cmd="Up">
                <i class="ui-ptz-icon-up"></i>
            </a>
            <a class="ui-ptz-icon" href="javascript:;" cmd="RightUp">
                <i class="ui-ptz-icon-rightup"></i>
            </a>
            <a class="ui-ptz-icon" href="javascript:;" cmd="Left">
                <i class="ui-ptz-icon-left"></i>
            </a>
            <a class="ui-ptz-specail-icon" href="javascript:;" t="title::w_Position" id="ptz_locate">
                <i class="ui-ptz-icon-center"></i>
            </a>
            <a class="ui-ptz-icon" href="javascript:;" cmd="Right">
                <i class="ui-ptz-icon-right"></i>
            </a>
            <a class="ui-ptz-icon" href="javascript:;" cmd="LeftDown">
                <i class="ui-ptz-icon-leftdown"></i>
            </a>
            <a class="ui-ptz-icon" href="javascript:;" cmd="Down">
                <i class="ui-ptz-icon-down"></i>
            </a>
            <a class="ui-ptz-icon" href="javascript:;" cmd="RightDown">
                <i class="ui-ptz-icon-rightdown"></i>
            </a>
        </div>
    </div>
    <div class="tab-panel" data-page="ptz_joystick">
        <div class="vR-area">
            <div class="vR-control"></div>
        </div>
    </div>
</div>
<div class="main-ptz-step">
    <span t="w_Step+(1-8):"><!-- Speed(1-8): --></span>
    <select id="ptz_step" class="fn-width40">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5" selected>5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
    </select>
</div>
<div class="main-ptz-adjust">
    <div id="ptz_zoom_wrap" class="ui-ptz-adjust-item fn-clear">
        <a class="ui-ptz-icon ptzControl" href="javascript:;" cmd="ZoomWide">
            <i class="ui-ptz-icon-less"></i>
        </a>                                                    
        <label t="w_Zoom" class="ui-ptz-adjust-text"><!-- Zoom --></label>
        <a class="ui-ptz-icon ptzControl" href="javascript:;" cmd="ZoomTele">
            <i class="ui-ptz-icon-more"></i>
        </a>
    </div>
    <div id="ptz_focus_wrap" class="ui-ptz-adjust-item fn-clear">
        <a class="ui-ptz-icon ptzControl" href="javascript:;" cmd="FocusFar">
            <i class="ui-ptz-icon-less"></i>
        </a>                                                    
        <label t="w_Focus" class="ui-ptz-adjust-text"><!-- Focus --></label>
        <a class="ui-ptz-icon ptzControl" href="javascript:;" cmd="FocusNear">
            <i class="ui-ptz-icon-more"></i>
        </a>
    </div>
    <div id="ptz_iris_wrap" class="ui-ptz-adjust-item fn-clear">
        <a class="ui-ptz-icon ptzControl" href="javascript:;" cmd="IrisSmall">
            <i class="ui-ptz-icon-less"></i>
        </a>                                                    
        <label t="w_Iris" class="ui-ptz-adjust-text"><!-- Iris --></label>
        <a class="ui-ptz-icon ptzControl" href="javascript:;" cmd="IrisLarge">
            <i class="ui-ptz-icon-more"></i>
        </a>
    </div>
</div>